<template>
  <mu-row class="text-center">
    <mu-col width="50" v-for="(t, i) in times" :key="t.timeId">
      <a class="appoint-select" href="javascript:;" @click="confirmOrder(t, i)" v-if="t.leftNumber > 0">{{t.beginTime | time}}-{{t.endTime | time}}</a>
      <a class="appoint-select disabled" href="javascript:;" v-else>{{t.beginTime | time}}-{{t.endTime | time}}</a>
    </mu-col>
    
  </mu-row>
</template>

<script>
export default {
  props: ['times'],
  data () {
    return {
      dialog: false
    }
  },
  filters: {
    time (val) {
      if (!val) {
        return ''
      }
      return val.slice(11, 16)
    }
  },
  methods: {
    confirmOrder (t, i) {
      localStorage.appointTime = JSON.stringify(t)
      this.goNext()
    },
    goNext () {
      this.dialog = false
      this.$nextTick(() => {
        this.$router.push('/appointment/confirm-appoint')
      })
    }
  }
}
</script>

